<template>
	<view class="flex-col section_2">
		<view class="state-wrap align-center active" v-if="info.status === 1">
			<text class="txt">营业中</text>
			<image src="/static/door-checked.png" mode="widthFix" class="ic"></image>
		</view>
		<view class="state-wrap align-center" v-else>
			<text class="txt">休业中</text>
			<image src="/static/door-checkun.png" mode="widthFix" class="ic"></image>
		</view>
		<view class="flex-row group">
			<image :src="info.image" mode="aspectFill" class="logo"></image>
			<view class="flex-col items-start space-x-27">
				<text class="font_3 clamp">{{info.name}}</text>
				<text class="self-start font_1 text_5">营业时间：{{info.starttime}}—{{info.endtime}}</text>
				<view class="cars text_5 align-center" @click="navTo('/pages/door/cars',{store_id:info.id})">
					<text class="font_1">门店车辆</text>
					<image src="/static/msg-r.png" mode="aspectFill" class="ic"></image>
				</view>
			</view>
		</view>
		<!-- 已结束--不再展示  v-if="false"-->
		<view class="flex-row justify-end items-center group_7">
			<view class="flex-row space-x-51">
				<!-- 
				<view class="flex-row items-center space-x-9" @click="del">
					<image class="shrink-0 image_4" src="/static/car-del.png" />
					<text class="font_6">删除</text>
				</view>
				 -->
				<view class="flex-row items-center space-x-9" @click="navTo('/pages/door/doorHandle',{id:info.id})">
					<image class="shrink-0 image_5" src="/static/car-edit.png" />
					<text class="font_6">编辑</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
import {
	defineComponent,
	watchEffect,
	reactive,
	toRefs,
	computed
	// watch,
	// nextTick,
	// ref,
} from 'vue';
// import { onReachBottom,onLoad } from "@dcloudio/uni-app";
const doorItem = defineComponent({
	props: {
		info: {
			type: Object,
			default: () => ({})
		}
	},
	setup(props: any, ctx: any) {
		const data: any = reactive({
			info: {}
		});
		watchEffect(() => {
			data.info = props.info;
		});
		// const showDate = timestamp => {
		// 	return uni.$tools.date('m月d日 H:i', timestamp);
		// };
		const del =()=>{
			ctx.emit('del',{id:data.info.id,name:data.info.name});
		}
		

		return {
			...toRefs(data),
			del,
			// showDate
		};
	}
});
export default doorItem;
</script>

<style lang="scss" scoped>
.section_2 {
	padding-top: 30rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	margin-bottom: 24rpx;
	position: relative;
	.state-wrap{
		position: absolute;
		right: 20rpx;
		top: 30rpx;
		z-index: 2;
		.txt{
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			margin-right: 14rpx;
		}
		.ic{
			width: 40rpx;
			height: 20rpx;
		}
		&.active{
			.txt{
				color: #3E6FEF;
			}
		}
	}
	.group {
		padding: 0 29rpx 35rpx;
		.logo{
			margin-top: 18rpx;
			border-radius: 64rpx;
			width: 64rpx;
			height: 64rpx;
		}
		.space-x-27 {
			.font_3 {
				font-size: 32rpx;
				font-family: PingFang;
				color: #333333;
				margin-left: 14rpx;
				width: 350rpx;
			}
			.font_1 {
				font-size: 24rpx;
				font-family: PingFang;
				color: #999999;
			}
			.text_5 {
				margin-top: 19rpx;
				margin-left: 14rpx;
			}
			.ic{
				width: 16rpx;
				height: 16rpx;
				margin-left: 8rpx;
			}
		}
	}
	
	.group_7 {
		// margin-top: 35rpx;
		padding: 20rpx 14rpx 17rpx 25rpx;
		border-top: solid 2rpx #0000000f;
		.space-x-6 {
			& > view:not(:first-child),
			& > text:not(:first-child),
			& > image:not(:first-child) {
				margin-left: 6rpx;
			}
			.image_6 {
				width: 15rpx;
				height: 9rpx;
			}
		}
		.space-x-51 {
			& > view:not(:first-child),
			& > text:not(:first-child),
			& > image:not(:first-child) {
				margin-left: 51rpx;
			}
			.space-x-9 {
				& > view:not(:first-child),
				& > text:not(:first-child),
				& > image:not(:first-child) {
					margin-left: 9rpx;
				}
				.image_4 {
					width: 34rpx;
					height: 32rpx;
				}
				.font_6 {
					font-size: 24rpx;
					font-family: PingFang;
					color: #333333;
				}
				.image_5 {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
}
</style>
